<template>
  <div>
    <MainHeader></MainHeader>
    <!-- Banner Area Starts -->
    <section class="banner-area" style="margin-top: 40px">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6 px-0">
            <img src="static/assets/pic/mian.webp" style="width: 700px;float: right;border-radius: 15px;box-shadow: 10px 10px 5px #888888;">
          </div>
          <div class="col-lg-6 align-self-center">
            <div class="banner-text">
              <h1>find your  <span> Campus Second-hand</span> with this Platform</h1>
              <p class="py-3">
                当代经济发展迅速,大学生作为基数最大的消费群体,消费欲望强烈,难免产生大量的闲置物品。
                校园二手商品交易平台是一个服务于在校学生的C2C（Custom to Custom）的交易网站,通过本网站用户可自由出售和购买商品,为广大学生提供了平等互利、方便快捷的交易空间</p>
              <a href="#" class="secondary-btn">explore now<span class="flaticon-next"></span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Banner Area End -->

    <!-- Feature Area Starts -->
    <section class="feature-area section-padding2">
      <div class="container">
        <div class="row">
          <div class="col-lg-4">
            <div class="single-feature mb-4 mb-lg-0">
              <h4>Personal Release</h4>
              <p class="py-3">
                闲置品，及时随地发布带来无限便捷。无需第三方，个人即是卖家，又是买家，闲置品不再“闲置”</p>
              <a href="#" class="secondary-btn">explore now<span class="flaticon-next"></span></a>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="single-feature mb-4 mb-lg-0">
              <h4>Commodity display</h4>
              <p class="py-3">
              更直观的商品介绍，更多商品信息等您了解发现，加入购物车后轻松购买，便捷查询个人发布过的二手品</p>
              <a href="#" class="secondary-btn">explore now<span class="flaticon-next"></span></a>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="single-feature">
              <h4>Business communication</h4>
              <p class="py-3">
                轻松沟通，及时回复让买家了解更多商品具体信息，校内交易带来更安全的保障</p>
              <a href="#" class="secondary-btn">explore now<span class="flaticon-next"></span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Feature Area End -->

    <!-- Category Area Starts -->
    <section class="category-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>Find Commodity by Category</h2>
              <p>More Convenient, Efficient And Intuitive</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4">
              <i class="iconfont icon-shangpin" style="font-size: 40px;color: lightseagreen"></i>
              <i class=""></i>
              <h4>Commodity & Discount</h4>
              <h5>cheaper</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4">
              <i class="iconfont icon-zhi" style="font-size: 40px;color: lightseagreen"></i>
              <h4>Security & quality</h4>
              <h5>Quality assurance</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4">
              <i class="iconfont icon-fabu" style="font-size: 40px;color: lightseagreen"></i>
              <h4>Personal & Others</h4>
              <h5>Personal release of goods</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4">
              <i class="iconfont icon-sousuo" style="font-size: 40px;color: lightseagreen"></i>
              <h4>Search  & Show</h4>
              <h5>Find what you love</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4 mb-lg-0">
              <i class="iconfont icon-fenlei" style="font-size: 40px;color: lightseagreen"></i>
              <h4>Category & Summary</h4>
              <h5>Convenient  for you</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4 mb-lg-0">
              <i class="iconfont icon--tupianzhanshi" style="font-size: 40px;color: lightseagreen"></i>
              <h4>Real & Detailed</h4>
              <h5>Display product details</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4 mb-md-0">
              <i class="iconfont icon-gouwuchekong" style="font-size: 40px;color: lightseagreen"></i>
              <h4>Collection& Cart</h4>
              <h5>Collection</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center">
              <i class="iconfont icon-liaotian" style="font-size: 40px;color: lightseagreen"></i>
              <h4>Chat & Communication</h4>
              <h5> Communicate Directly</h5>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Category Area End -->

    <!-- Jobs Area Starts -->
    <!-- Jobs Area End -->

    <!-- Newsletter Area Starts -->
    <section class="newsletter-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>Discover what you love</h2>
              <p>Convenient query And  information display</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <form action="#">
              <input  placeholder="Find More " onfocus="this.placeholder = ''"
                     onblur="this.placeholder = 'Find  More'" v-model="searchKey">
              <el-button  @click="showInfo" style="height: 52px;background-color: #099e80">Find Now</el-button>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!-- Newsletter Area End -->

    <!-- News Area Starts -->
    <section id="blog" class="news-area section-padding3" style="margin-top: 40px">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2> Display Commodity Information </h2>
              <p>More intuitive and concise page</p>
            </div>
          </div>
        </div>
        <div class="row" v-if="product.length===0" @click="show">
          <div class="col-lg-4 col-md-6">
            <div class="single-news mb-5 mb-lg-0">
              <img src="static/assets/commondiy/taideng.webp" style="width:394px;height: 300px"/>
              <div class="news-tag">
                <ul class="my-4">
                  <li><h5><i class=" iconfont icon-shangpinxinxi"></i> 闲置台灯</h5></li>
                  <li class="separator mx-2"><span></span></li>
                  <li><h5><i class="iconfont icon-yonghu"></i>卖家：苏苏苏</h5></li>
                </ul>
              </div>
              <div style="font-size: 30px;color: red;margin-bottom: 20px;text-align: center">￥10元</div>
              <div class="news-title">
                <h4><a href="#">多余闲置台灯，有需要的同学，前来咨询</a></h4>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="single-news mb-5 mb-lg-0">
              <img src="static/assets/commondiy/taideng.webp" style="width:394px;height:300px"/>
              <div class="news-tag">
                <ul class="my-4">
                  <li><h5><i class=" iconfont icon-shangpinxinxi"></i> 闲置台灯</h5></li>
                  <li class="separator mx-2"><span></span></li>
                  <li><h5><i class="iconfont icon-yonghu"></i>卖家：苏苏苏</h5></li>
                </ul>
              </div>
              <div style="font-size: 30px;color: red;margin-bottom: 20px;text-align: center">￥10元</div>
              <div class="news-title">
                <h4><a href="#">多余闲置台灯，有需要的同学，前来咨询</a></h4>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="single-news mb-5 mb-lg-0">
              <img src="static/assets/commondiy/taideng.webp" style="width:394px;height: 300px"/>
              <div class="news-tag">
                <ul class="my-4">
                  <li><h5><i class=" iconfont icon-shangpinxinxi"></i> 闲置台灯</h5></li>
                  <li class="separator mx-2"><span></span></li>
                  <li><h5><i class="iconfont icon-yonghu"></i>卖家：苏苏苏</h5></li>
                </ul>
              </div>
              <div style="font-size: 30px;color: red;margin-bottom: 20px;text-align: center">￥10元</div>
              <div class="news-title">
                <h4><a href="#">多余闲置台灯，有需要的同学，前来咨询</a></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="row" v-else>
          <div class="col-lg-4 col-md-6" v-for="item in product" @click="jumpItem(item.commid)">
            <div class="single-news mb-5 mb-lg-0">
              <img :src="item.image" style="width:320px;height: 300px"/>
              <div class="news-tag">
                <ul class="my-4">
                  <li><h4><i class=" iconfont icon-shangpinxinxi"></i>{{item.commname}}</h4></li>
                  <li class="separator mx-2"><span></span></li>
                </ul>
              </div>
              <div style="font-size: 30px;color: red;margin-bottom: 20px;text-align: center">￥{{item.thinkmoney}}元</div>
              <div class="news-title">
                <h4><a href="#">多余闲置商品，有需要的同学，前来咨询</a></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- News Area End -->

    <!-- Download Area Starts -->
    <section class="download-area section-padding">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6">
            <div class="download-text">
              <h2>Use this platform on your computer</h2>
              <p class="py-3">
                With the rapid development of contemporary economy, college students, as the largest consumer group, have a strong desire to consume, which inevitably produces a large number of idle goods. The platform designed in this paper adopts Spring, Spring MVC and MyBatis framework, and uses MySQL as the bac</p>
              <div class="download-button d-sm-flex flex-row justify-content-start">
                <div class="download-btn mb-3 mb-sm-0 flex-row d-flex">
                  <i class="iconfont icon-diannao"></i>
                  <a href="#">
                    <p>
                      <span>Available</span> <br>
                      on your Windows
                    </p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 pr-0">
            <div class="download-img"></div>
          </div>
        </div>
      </div>
    </section>
    <!-- Download Area End -->
    <MainFooter></MainFooter>
  </div>
</template>

<script>
import MainHeader from '../pages/Home/header'
import MainFooter from '../pages/Home/footer'
import {baseUrl} from '../utils/Address'
export default {
  components: {
    MainHeader,
    MainFooter
  },
  data(){
    return{
      searchKey:'',
      product:[]
    }

  },
  mounted () {
  },
  methods:{
    jumpItem(id){
      this.$router.push({path:'/item',query: {id:id}})
    },
    getLastedProduct(){
        this.axios(`${baseUrl}/product/latest`).then(
          res=>{
            this.product=res.data.data
            console.log(this.product)
          }
        )
    },
    showInfo(){
      this.axios.get(`${baseUrl}/product/search/${this.searchKey}`).then(
        res=>{
          this.product=res.data.data
          console.log(this.product)
          if(this.product.length===0){
            this.$message.info("暂时没有该类商品")
          }
        }
      )
    },
    show(){
      this.$message.info("商品固定展示数据，请从上方查询获取真实商品数据！")
    }
  }
}
</script>

